<template>
    <el-container>
        <el-main class="container-fluid">
            <div class="row">
                <div class="col">
                    <el-table border :data="tableData">
                        <el-table-column prop="ID" label="ID" width="60"></el-table-column>
                        <el-table-column prop="是否可编译(isac)" label="isac" width="60">
                            <template #default="scope">
                                {{
                                    scope.row.result ? '是' : '否'
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="createdAt" :formatter="({ createdAt }) => TimeYH(createdAt)"
                            label="createdAt" width="120"></el-table-column>
                        <el-table-column prop="lang" label="language" width="80"></el-table-column>
                        <el-table-column prop="context" label="context"></el-table-column>
                        <el-table-column prop="code" label="code">

                        </el-table-column>
                        <el-table-column prop="操作" width="120" label="操作">
                            <template #default="scope">
                                <el-button type="danger" @click="del(scope.row.ID)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-main>
        <div class="col"></div>
        <el-footer height="40px">
            <el-pagination @current-change="handleCurrentChange" :page-size="20" layout="prev, pager, next"
                :total="count"></el-pagination>
        </el-footer>
    </el-container>
</template>

<script setup lang="ts">
import { ElMain, ElFooter, ElContainer, ElHeader, ElButton, ElTableColumn, ElMessage, ElMessageBox } from 'element-plus'
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { asyncselectusersolution, asyncdelusersolution } from '../../../api';
import { Storekey } from '../../../interface';
import { TimeYH } from '../../../util/time';
const p = defineProps<{ ID: number, question?: Studycodemodel.Iquestion, start: () => Studycodemodel.Iquestion }>()
const tableData = ref<Studycodemodel.Iaccepted[]>([])
const offset = ref(0)
const count = ref(0)
const store = useStore(Storekey)
const socket = computed(() => {
    return store.state.socket
})


function del(ID: number) {
    ElMessageBox.confirm(
        '确定要删除',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    ).then(async () => {
        ElMessage.success('删除成功')
        await asyncdelusersolution({ ID })
        await start()

    }).catch(() => {

    })
}





onMounted(() => {
    start()
    socket.value.on('adminruncode', start)
})

function handleCurrentChange(val: number) {
    offset.value = 20 * (val - 1);
}

async function start() {
    const data = await asyncselectusersolution({
        questionid: p.ID
    })
    tableData.value = data.rows
    count.value = data.count
}

</script>

<style>
#monaco {
    height: 80vh;
    overflow: hidden;
}
</style>